<template>
  <!-- <div> -->
  <div class="BubbleWordView1">
    <div id="BubbleWord"></div>
  </div>
  <!-- </div> -->
</template>
  
  <script setup lang="ts">
const echart = inject("echart");
let myChart = null;
const parent_list: Array = ref(props.BubbleWord_data);
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
menulist.$subscribe((arg, state) => {  //需要写在数据变化前面
    // console.log('subscribe', arg, state)
    getData()
})
const props = defineProps({
  BubbleWord_data: {
    type: String,
    default: ""
  }
});
watch(
  () => props.BubbleWord_data,
  (newValue, oldValue) => {
    if (newValue) {
      parent_list.value = props.BubbleWord_data;
    }
  }
);

onMounted(() => {
  initEcharts();
  getData();
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = () => {
  var chartdata = [
    { name: "污水", sum: Math.floor(Math.random() * 80) + 1, size: 50 },
    { name: "碳排放", sum:  Math.floor(Math.random() * 80) + 1, size: 60 },
    { name: "节能", sum:  Math.floor(Math.random() * 80) + 1, size: 60 },
    { name: "钢铁产量", sum:  Math.floor(Math.random() * 80) + 1, size: 70 },
    { name: "新能源", sum:  Math.floor(Math.random() * 80) + 1, size: 80 },
    { name: "排污", sum:  Math.floor(Math.random() * 80) + 1, size: 80 },
    { name: "铜矿", sum:  Math.floor(Math.random() * 80) + 1, size: 90 }
  ];
  var color = [
    "#D489FF",
    "#0053D9",
    "#2FA7FF",
    "#10DCC0",
    "#10B623",
    "#EFFE69",
    "#D09C72",
    "#C81016"
  ];
  var data = [];

  chartdata.map((item, index) => {
    data.push({
      name: item.name + "\n\n" + item.sum,
      value: 111,
      symbolSize: item.size,
      draggable: true,
      label: {
        normal: {
          textStyle: {
            fontSize: 12,
            color: "#fff"
          }
        }
      },
      itemStyle: {
        normal: {
          color: new echart.graphic.RadialGradient(0.5, 0.5, 1, [
            {
              offset: 0.2,
              color: "rgba(27, 54, 72, 0.2)"
            },
            {
              offset: 0.8,
              color: color[index]
            }
          ]),
          opacity: 1,
          borderWidth: 1,
          borderColor: color[index],
          shadowBlur: 7,
          symbolOffset: 0.6,
          shadowColor: color[index]
        }
      }
    });
  });
  renderEcharts(data);
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("BubbleWord"));
};
const renderEcharts = (data: any) => {
  myChart.setOption({
    animationDurationUpdate: function(idx) {
      return idx * 100;
    },
    tooltip: {
      trigger: "item",
      formatter: function(params, ticket, callback) {
        return params.data.tips || params.name;
      }
    },
    animationEasingUpdate: "bounceIn",
    itemStyle: {
      // color: 'red',
    },
    cursor: "pointer",
    series: [
      {
        type: "graph",
        layout: "force",
        cursor: "pointer",
        force: {
          repulsion: 200,
          edgeLength: 100
        },
        roam: true,
        label: {
          normal: {
            show: true
          }
        },
        data
      }
    ]
  });
};
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>
  
  <style scoped>
.BubbleWordView1 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#BubbleWord {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>